import Base from './Base.js';
import Point from '../Point.js';
import { GRAPH_TYPES } from './Graph.enum.js';
import Color from '../Color';

class ArcPolygon extends Base {
    constructor({ pos } = {}) {
        super(...arguments);
        this.name = GRAPH_TYPES.ARCPOLYGON;
        // this.name = GRAPH_TYPES.POLYGON;
        if (!this.points || !this.points.length) this.points = [pos];
        if (this.points && this.points.length > 1 && Point.equals(this.points[0], this.points[this.points.length - 1]))
            this.complete = true;
        else this.complete = false;
        this.initControlPoints();
    }

    setComplete(val) {
        this.complete = val;
    }

    initPoints(pos) {
        let p = new Point(pos.x, pos.y),
            len = this.points.length;
        if (len > 2 && p.equals(this.points[0])) {
            if (len % 2) this.points.push(p);
            this.complete = true;
            this.initControlPoints();
        } else {
            this.points.push(p);
        }
    }

    initUpdate() {
        if (!this.complete) return;
        console.log('[ArcPolygon] initUpdate: ', ...arguments);
        super.initUpdate();
    }

    createPath() {
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, 5, 0, Math.PI * 2, false);
    }
    drawPath(ctx) {
        let yr = this.isReverse ? -1 : 1;
        ctx.beginPath();
        this.points.forEach((p, i) => {
            if (i === 0) {
                ctx.moveTo(p.x, p.y * yr);
            } else if (i % 2 === 0) {
                ctx.quadraticCurveTo(this.points[i - 1].x, this.points[i - 1].y * yr, p.x, p.y * yr);
            } else if (i === this.points.length - 1) {
                ctx.quadraticCurveTo(p.x, p.y * yr, this.points[0].x, this.points[0].y * yr);
            }
        });
        ctx.closePath();
    }
    drawSelected(ctx) {
        if (ctx) this.ctx = ctx;
        if (!this.complete) return this._drawLocalPoints();

        this.ctx.save();
        this.ctx.lineWidth = this.lineWidth;
        this.ctx.strokeStyle = this.strokeStyle;
        this.drawPath(this.ctx);
        this.ctx.stroke();
        this.ctx.restore();
    }
    draw(ctx, drawDashLine = false) {
        if (ctx) this.ctx = ctx;
        if (!this.complete) return this._drawLocalPoints();
        this.ctx.save();
        // this.ctx.beginPath();
        // this.points.forEach((p, i) => {
        //     if (i === 0) {
        //         this.ctx.moveTo(p.x, p.y * yr);
        //     } else if (i % 2 === 0) {
        //         this.ctx.quadraticCurveTo(this.points[i - 1].x, this.points[i - 1].y * yr, p.x, p.y * yr);
        //     }
        // });
        this.drawPath(this.ctx);
        if (this.fillStyle) {
            this.ctx.fillStyle = this.fillStyle;
            this.ctx.fill();
        }
        if (drawDashLine) {
            let pen = 1 / this.scaling || 100;
            this.ctx.lineWidth = pen * 10;
            this.ctx.strokeStyle = Color.lightenDarkenColor(this.fillStyle, 0.3);
            this.ctx.setLineDash([pen * 20, pen * 20]);
            this.ctx.lineCap = 'round';
        } else {
            this.ctx.lineWidth = this.lineWidth;
            this.ctx.strokeStyle = this.strokeStyle;
        }
        // this.ctx.closePath();
        this.ctx.stroke();
        this.ctx.restore();

        //绘制平移/更新图形锚点基准点
        // this.drawAnchorPoint();
        //绘制未连接点 - 未避免车辆绘制，修改到Painter中调用
        // this.drawUnConnectPoints();
    }

    drawCached(ctx) {
        if (!this.complete) return;
        ctx.save();
        // this.drawPath(ctx);
        let penSize = 1 / this.scaling || 100;
        // ctx.fillStyle = Color.lightenDarkenColor(this.fillStyle, 0.3);
        // ctx.fill();
        ctx.lineWidth = penSize * 5;
        ctx.strokeStyle = 'rgba(0, 0, 255, 0.6)';
        ctx.setLineDash([penSize * 10, penSize * 10]);
        ctx.lineCap = 'round';
        ctx.stroke();
        ctx.restore();
    }
    _drawLocalPoints() {
        //TODO 优化 点多了，FPS会下降
        // console.log('[ArcPolygon] drawPoints: ');
        // let penSize = 1;
        let penSize = (1 / this.scaling) * 2 * this.ratio;
        let yr = this.isReverse ? -1 : 1;
        this.ctx.save();
        // dash line
        this.ctx.beginPath();
        this.ctx.lineWidth = penSize / 3;
        this.ctx.strokeStyle = '#0000ff';
        this.ctx.setLineDash([penSize * 3, penSize * 3]);
        this.points.forEach((p, i) => {
            // this.ctx.lineWidth = this.lineWidth;
            if (i === 0) this.ctx.moveTo(p.x, p.y * yr);
            else this.ctx.lineTo(p.x, p.y * yr);
        });
        this.ctx.stroke();
        this.ctx.closePath();

        // solid line
        this.ctx.beginPath();
        // this.ctx.lineWidth = this.lineWidth;
        this.ctx.lineWidth = penSize;
        this.ctx.strokeStyle = '#333333';
        this.points.forEach((p, i) => {
            // console.log('[ArcPolygon] drawPoints: ', i, i % 2);
            if (i === 0) this.ctx.moveTo(p.x, p.y * yr);
            else if (i % 2 === 0)
                this.ctx.quadraticCurveTo(this.points[i - 1].x, this.points[i - 1].y * yr, p.x, p.y * yr);
            // this.ctx.stroke();
        });
        if (this.fillStyle) {
            this.ctx.fillStyle = this.fillStyle;
            this.ctx.fill();
        }
        this.ctx.closePath();

        // darw points
        this.points.forEach(p => {
            this.ctx.beginPath();
            this.ctx.arc(p.x, p.y * yr, penSize, 0, -Math.PI * 2);
            this.ctx.fillStyle = 'rgba(0,0,0,0.85)';
            this.ctx.fill();
            this.ctx.closePath();
        });

        this.ctx.restore();
    }

    _getPathDescription(points) {
        let d = '';
        points.forEach((p, i) => {
            if (i === 0) d += 'M' + p.x + ',' + p.y;
            else if (i % 2 === 0) d += ' Q' + points[i - 1].x + ',' + points[i - 1].y + ' ' + p.x + ',' + p.y;
            else if (i === points.length - 1) {
                d += ' Q' + p.x + ',' + p.y + ' ' + points[0].x + ',' + points[0].y;
            }
            // else d += ', L' + p.x + ' ' + p.y;
        });
        // if (points.length) d += ', L' + points[0].x + ' ' + points[0].y;
        d += ' Z';
        return d;
    }
    getSVGCodes() {
        // <path d="M-2500,500 Q-2000,1000 -1500,500 Q-1500,-400 -2000,-500 Q-2500,0 -2500,500 Z" fill="rgba(0,0,0,0.00)" stroke="rgba(0,0,0,0.00)"></path>
        let codes = '<path stroke-linecap="round" ';
        codes += 'stroke="' + this.strokeStyle + '" ';
        codes += 'stroke-width="' + this.lineWidth + '" ';
        codes += 'fill="' + this.fillStyle + '" ';
        codes += 'graph-type="' + this.name + '" ';
        codes += 'd="' + this._getPathDescription(this.points) + '" ';
        codes += '></path>';
        return codes;
    }
}
export default ArcPolygon;
